<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="小组赛" name="first">
            <div style="display: flex;gap:8px;margin-bottom: 8px;">
                <el-card style="flex:1">
                    <template #header>A组</template>
                    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
                </el-card>
                <el-card style="flex:1">
                    <template #header>B组</template>
                    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
                </el-card>
                <el-card style="flex:1">
                    <template #header>C组</template>
                    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
                </el-card>
                <el-card style="flex:1">
                    <template #header>D组</template>
                    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
                </el-card>
            </div>
            <!-- 顶部栏按钮 -->
            <el-button type="primary" @click="dialogAdd = true">新增选手</el-button>

            <!-- 表格 -->
            <el-table ref="tableRef" stripe border @selection-change="selectionChange" :data="tableData"
                style="margin-top: 10px;width: 100%">
                <el-table-column type="selection" width="40" />
                <el-table-column prop="id" label="Id" width="80" />
                <el-table-column prop="player1_id" label="选手1" />
                <el-table-column prop="player2_id" label="选手2" />
                <el-table-column prop="score1" label="选手1胜利场次" />
                <el-table-column prop="score2" label="选手2胜利场次" />
                <el-table-column prop="group_id" label="分组id" />
                <el-table-column prop="create_time" label="时间" />
                <el-table-column prop="actions" label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index)">修改</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="淘汰赛" name="second">Config</el-tab-pane>
        <el-tab-pane label="决赛" name="third">Role</el-tab-pane>
    </el-tabs>

    <!-- 新增弹框 -->
    <el-dialog v-model="dialogAdd" title="新增">
        <!-- 内容区域 -->
        <el-form :model="addData">
            <el-form-item label="选手1">
                <el-input v-model="addData.player1_id" />
            </el-form-item>
            <el-form-item label="选手2">
                <el-input v-model="addData.player2_id" />
            </el-form-item>
            <el-form-item label="选手1胜利场次">
                <el-input v-model="addData.score1" />
            </el-form-item>
            <el-form-item label="选手2胜利场次">
                <el-input v-model="addData.score2" />
            </el-form-item>
        </el-form>
        <!-- 底部插槽 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAdd = false">取消</el-button>
                <el-button type="primary" @click="handleAdd"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog v-model="dialogPut" title="修改">
        <!-- 内容区域 -->
        <el-form :model="putData">
            <el-form-item label="ID">
                <el-input v-model="putData.id" disabled />
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="putData.name" />
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="putData.role" />
            </el-form-item>
            <el-form-item label="等级">
                <el-input v-model="putData.grade" />
            </el-form-item>
            <el-form-item label="荣耀">
                <el-input v-model="putData.glory" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="putData.remark" />
            </el-form-item>
        </el-form>
        <!-- 底部插槽 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogPut = false">取消</el-button>
                <el-button type="primary" @click="handlePut"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const activeName = ref('first')

// 新增弹框
const dialogAdd = ref(false)
// 数据
const addData = ref({})
// 新增
const handleAdd = async () => {
    const result = await $api.post('/score/post', addData.value)
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        dialogAdd.value = false
        addData.value = {}
        initData()
    } else {
        ElMessage.error(msg)
    }
}

// 修改弹框
const dialogPut = ref(false)
// 点击修改
const handleEdit = (index) => {
    // 回传数据
    putData.value = tableData.value[index]
    dialogPut.value = true
}
// 数据
const putData = ref({})
// 修改
const handlePut = async () => {
    const result = await $api.post('/score/put', putData.value)
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        dialogPut.value = false
        putData.value = {}
        initData()
    } else {
        ElMessage.error(msg)
    }
}

// 删除
const handleDelete = (index) => {
    ElMessageBox.alert('请确认是否删除，删除数据后无法找回', '警告！', {
        confirmButtonText: '确认',
        callback: async (action) => {
            console.log('action', action)
            if (action == 'confirm') {
                let deleteData = { 'id': tableData.value[index].id }
                const result = await $api.post('/score/delete', deleteData)
                const { code, data, msg } = result.data
                // 成功时
                if (code == 0) {
                    ElMessage.success(msg)
                    initData()
                } else {
                    ElMessage.error(msg)
                }
            }
        }
    })
}

// 初始化数据
const initData = async () => {
    const result = await $api.get('/score/get', { id: route.params.id })
    const { code, data, msg } = result.data
    // 成功时
    if (code == 0) {
        ElMessage.success(msg)
        tableData.value = data
    } else {
        ElMessage.error(msg)
    }
}

onMounted(() => {
    initData()
})
</script>

<style scoped></style>